<!-- Site Setting Panel -->
  <section id="settings" data-ng-include=" 'views/settings/settings.html' " style="display:none"></section>
<!-- Site Setting Panel End -->

<div class="pageheader">
    <h2><i class="fa fa-list"></i> Nested Lists </h2>
    <div class="breadcrumb-wrapper hidden-xs">
      <span class="label">You are here:</span>
      <ol class="breadcrumb">
        <li>
          <a href="index.html">
            Home
          </a>
        </li>
        <li class="active"> Nested Lists </li>
      </ol>
    </div>
  </div>

<div class="page" data-ng-controller="TreeDemoCtrl">

    <div class="row">
        <div class="col-md-6">

            <section class="panel panel-default">
                <h4 class="nm pad-15">Nested <strong> Lists </strong></h4>
                <div class="panel-body">
                    <div ui-tree="options">
                        <ol ui-tree-nodes ng-model="list" >
                            <li ng-repeat="item in list" ui-tree-node ng-include="'items_renderer.html'"></li>
                        </ol>
                    </div>
                </div>
            </section> 

        </div>
        <div class="col-md-6">

            <section class="panel panel-default">
                <h4 class="nm pad-15">Serialised <strong> Output </strong></h4>
                <div class="panel-body">
                    <pre class="text-muted">{{list}}</pre>
                </div>
            </section> 

        </div>
    </div>


    <script type="text/ng-template" id="items_renderer.html">
        <div class="angular-ui-tree-handle">
            <span>{{item.items}}</span>
        </div>
    </script>

    <script type="text/ng-template" id="items_renderer.html">
        <div class="angular-ui-tree-handle">
            <span data-ng-show="item.items.length > 0"><a class="angular-ui-tree-icon" data-nodrag ng-click="toggle(this)">
                <span class="angular-ui-tree-icon-collapse" ng-class="{'collapsed': collapsed, 'uncollapsed': !collapsed}"></span>
            </a></span>
            {{item.title}}
            <a class="pull-right angular-ui-tree-icon angular-ui-tree-icon-action" data-nodrag ng-click="remove(this)"><span class="fa fa-times"></span></a>
            <a class="pull-right angular-ui-tree-icon angular-ui-tree-icon-action" data-nodrag ng-click="newSubItem(this)"><span class="fa fa-plus"></span></a>
        </div>
        <ol ui-tree-nodes="options" ng-model="item.items" ng-class="{hidden: collapsed}">
            <li ng-repeat="item in item.items" ui-tree-node ng-include="'items_renderer.html'">
            </li>
        </ol>
    </script>

</div>